<template>
	<div class="slider" ref="slider">
	    <div class="slider-group" ref="sliderGroup">
	      	<slot>
	      	</slot>
	    </div>
	    <div class="dots">
<<<<<<< HEAD
	    	<span class="dot" v-for="(item,index) in dots" :class="{active:index == pageIndex}"></span>
	    </div>
	</div>
</template> 

<script>
	import {addClass} from 'assets/js/dom';
	import BScroll from 'better-scroll';
	export default {
		props:{
			loop: {
	        type: Boolean,
	        default: true
	      },
	      autoPlay: {
	        type: Boolean,
	        default: true
	      },
	      interval: {
	        type: Number,
	        default: 4000
	      },
	      showDot: {
	        type: Boolean,
	        default: true
	      },
	      click: {
	        type: Boolean,
	        default: true
	      }
		},
		data(){
			return{
=======
	      	<span class="dot" v-for="(item,index) in dots" :class="{active:pageIndex == index}"></span>
	    </div>
	</div>
</template>

<script>
	import { addClass } from 'assets/js/dom'
	import BSroll from 'better-scroll'
	export default {
		name:"slider",
		props:{
			loop:{
				type:Boolean,
				default:true
			},
			autoPlay:{
				type:Boolean,
				default:true
			},
			interval:{
				type:Number,
				default:4000
			}
		},
		data(){
			return {
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
				dots:[],
				pageIndex:0
			}
		},
		mounted(){
			setTimeout(()=>{
<<<<<<< HEAD
				this._initSliderWidth();
				this._initDots();
				this._initSlider();
				if(this.autoPlay){
					this._play()
				};
				window.addEventListener('resize',()=>{
					this._initSliderWidth()
				})
			},200)
		},
		methods:{
			_initSliderWidth(){
				// console.log(addClass)
				// let children = this.$refs.sliderGroup.children;
				this.children = this.$refs.sliderGroup.children
				let width = 0;
				let sliderWidth = this.$refs.slider.clientWidth;
				for (let i=0; i < this.children.length; i++) {
					let child = this.children[i];
					addClass(child,'slider-item');
					child.style.width = sliderWidth + 'px';
					width += sliderWidth;				

				}
				if(this.loop){
					width += 2*sliderWidth;
				}
				this.$refs.sliderGroup.style.width = width + 'px';
			},
			_initSlider(){
				this.slide = new BScroll(this.$refs.slider, {
			        scrollX: true,
			        momentum: false,
			        snap: {
			        	loop: this.loop,
			        	threshold: 0.3,
			        	speed: 400
			        }
		        });

				//下面这个函数不能用普通函数形式，要用es6，因为如果用普通函数，this将指向slide,这是一个bs-scroll对象
		        this.slide.on("scrollEnd",()=>{
		        	let pageIndex = this.slide.getCurrentPage().pageX;
		        	if (this.autoPlay) {
			        	this._play()
		        	};
		        	if (this.loop) {
		        		pageIndex--;
		        	}
		        	this.pageIndex = pageIndex;
		        })
			},
			_initDots(){
				this.dots = new Array(this.children.length);
			},
			_play(){
				let pageIndex = this.slide.getCurrentPage().pageX + 1;

				//下面这个定时器里的函数不能用普通函数形式，要用es6，因为如果用普通函数，this将指向window
				clearTimeout(this.timer)
				this.timer = setTimeout(()=>{
					this.slide.goToPage(pageIndex,0,300);	
=======
				// 初始化宽度
				this._setSliderWidth()
				this._initDots()
				// 初始化slider
				this._initSlider()
				if(this.autoPlay){
					this._play()
				}
			},20)
			window.addEventListener('resize', () => {
		        if (!this.slider) {
		          return
		        }
		        this._setSliderWidth(true)
		    })
		},
		methods:{
			_setSliderWidth(isResize){
				this.children = this.$refs.sliderGroup.children
				let width = 0
				// 获取slider的宽度
				let sliderWidth = this.$refs.slider.clientWidth
				for (let i = 0;i < this.children.length; i++){
					let child = this.children[i]
					addClass(child,'slider-item')
					child.style.width = sliderWidth + 'px'
					width += sliderWidth
				}
				if(this.loop){
					width += 2*sliderWidth
				}
				this.$refs.sliderGroup.style.width = width + 'px'
			},
			_initSlider(){
				this.slider = new BSroll(this.$refs.slider, {
					scrollX: true,
			        momentum: false,
			        snap: {
			            loop: this.loop,
			            threshold: 0.3,
			            speed: 400
			        }
				})
				this.slider.on('scrollEnd', ()=>{
					let pageIndex = this.slider.getCurrentPage().pageX
					if(this.loop){
						pageIndex -= 1;
					}
					this.pageIndex = pageIndex
					if(this.autoPlay){
						this._play()
					}
				})
			},
			_initDots(){
				this.dots = new Array(this.children.length)
			},
			_play(){
				let pageIndex = this.slider.getCurrentPage().pageX + 1
				clearTimeout(this.timer)
				this.timer = setTimeout(()=>{
					this.slider.goToPage(pageIndex,0,400)
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
				},this.interval)
			}
		}
	}
</script>

<style scoped lang="less">
	@import "~assets/less/variable";
	.slider {
<<<<<<< HEAD
		position: relative;
      	min-height: 1px;
      	position: relative;
    	.slider-group {
			position: relative;
			overflow: hidden; 
			white-space: nowrap;
			.slider-item {
				float: left;
				box-sizing: border-box;
				overflow: hidden;
				text-align: center;
				a{
					display: block;
					width: 100%;
					overflow: hidden;
					text-decoration: none;
				}
				img{
				  display: block;
				  width: 100%;
				}
			}
	 	}
	}
	.dots{
	    position: absolute;
	    right: 0;
	    left: 0;
	    bottom: 12px;
	    text-align: center;
	    font-size: 0;
	    .dot{
=======
      	min-height: 1px;
      	position: relative;
    	.slider-group {
	      position: relative;
	      overflow: hidden;
	      white-space: nowrap;
	      .slider-item {
	        float: left;
	        box-sizing: border-box;
	        overflow: hidden;
	        text-align: center;
	        a{
	          display: block;
	          width: 100%;
	          overflow: hidden;
	          text-decoration: none;
	        }
	        img{
	          display: block;
	          width: 100%;
	        }
	      }
	  }
	  .dots{
	      position: absolute;
	      right: 0;
	      left: 0;
	      bottom: 12px;
	      text-align: center;
	      font-size: 0;
	      .dot{
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
	        display: inline-block;
	        margin: 0 4px;
	        width: 8px;
	        height: 8px;
	        border-radius: 50%;
	        background: @color-text-l;
	        &.active{
<<<<<<< HEAD
	        	width: 20px;
	        	border-radius: 5px;
	        	background: @color-text-ll;
	        }
	    }
	}
=======
	          width: 20px;
	          border-radius: 5px;
	          background: @color-text-ll;
	        }
	      }
	    }
    }
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
</style>